import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch, Select, InputNumber, Checkbox } from 'antd'
import { converDate, SelectProps } from 'utils'
import { OperType } from 'utils/seletLocalData'

const Search = Input.Search
const { RangePicker } = DatePicker
const Option = Select.Option
const FormItem = Form.Item
const CheckboxGroup = Checkbox.Group

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const plainOptions = ['byAccountId', 'byChargeTypeId', 'byCurrencyCode', 'byType']

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const Filter = ({
  onAdd,
  onFilterChange,
  filter,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {
  const handleFields = (fields) => {
    const { createTime } = fields
    if (createTime.length) {
      fields.createTimeStart = createTime[0].format('YYYY-MM-DD 00:00:00')
      fields.createTimeEnd = createTime[1].format('YYYY-MM-DD 00:00:00')
      delete fields.createTime
    }
    const { GroupBy } = fields
    if (GroupBy) {
      GroupBy.forEach((val) => {
        fields[val] = true
      })
      delete fields.GroupBy
    }
    return fields
  }

  const onGroupbyChange = () => {

  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    fields = handleFields(fields)
    fields.typeName = fields.name
    onFilterChange(fields)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const { name, type, companyAccount, companyChargeType, currenciesCodeData } = filter
  const dateFormat = 'DD/MM/YYYY'
  let initialCreateTime = []
  if (filter.createTime && filter.createTime[0]) {
    initialCreateTime[0] = moment(converDate(filter.createTime[0]), dateFormat)
  }
  if (filter.createTime && filter.createTime[1]) {
    initialCreateTime[1] = moment(converDate(filter.createTime[1]), dateFormat)
  }
  const companyAccountData = companyAccount.map(d => <Option key={d.companyAccountId}>{d.name}</Option>)
  const typeData = OperType.map(d => <Option key={d.key}>{d.value}</Option>)
  const companyChargeTypeData = companyChargeType.map(d => <Option key={d.key}>{d.value}</Option>)
  const currenciesCodeOptions = currenciesCodeData.map(d => <Option key={d.code}>{d.code}</Option>)
  const checkedList = []
  return (
    <Form layout="horizontal">
      <Row>
        <Col span={8}>
          <FormItem label="Createtime" hasFeedback {...formItemLayout}>
            {getFieldDecorator('createTime', { initialValue: initialCreateTime })(
              <RangePicker style={{ width: '100%' }} size="large" onChange={handleChange.bind(null, 'createTime')} format={dateFormat} />
            )}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem label="GroupBy" hasFeedback {...formItemLayout}>
            {getFieldDecorator('GroupBy')(
              <CheckboxGroup options={plainOptions} onChange={onGroupbyChange} />
            )}
          </FormItem>
        </Col>

      </Row>
      <Row>
        <Col span={8}>
          <FormItem label="companyAccount" hasFeedback {...formItemLayout}>
            {getFieldDecorator('accountId')(<Select style={{ width: '100%' }}>{companyAccountData}</Select>)}
          </FormItem>
        </Col>

        <Col span={8}>
          <FormItem label="AmountMax" hasFeedback {...formItemLayout}>
            {getFieldDecorator('amountMax')(<InputNumber style={{ width: '100%' }} />)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="AmountMin" hasFeedback {...formItemLayout}>
            {getFieldDecorator('amountMin')(<InputNumber style={{ width: '100%' }} />)}
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <FormItem label="CurrencyCode" hasFeedback {...formItemLayout}>
            {getFieldDecorator('currencyCode')(<Select style={{ width: '100%' }} {...SelectProps}>{currenciesCodeOptions}</Select>)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="Type" hasFeedback {...formItemLayout}>
            {getFieldDecorator('type')(<Select style={{ width: '100%' }}>{typeData}</Select>)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="ChargeType" hasFeedback {...formItemLayout}>
            {getFieldDecorator('chargeTypeId')(<Select style={{ width: '100%' }}>{companyChargeTypeData}</Select>)}
          </FormItem>
        </Col>

      </Row>
      <Row>

        <Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
            <div >
              <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
              <Button size="large" onClick={handleReset}>Reset</Button>
            </div>
          </div>
        </Col>
      </Row>
    </Form>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Form.create()(Filter)
